<template>
    <div class="iconlist">
        <div v-for="item in iconlist" class="itemicon" @click="goto(item.path)">
            <div class="iconbox">
                <!-- 使用iconfont图标 可以设置大小和颜色 -->
                <i  class="iconfont" :class="item.icon" style="color:red;font-size: .25rem;"></i>
            </div>
            <span class="tit">{{item.name}}</span>
        </div>
        
        
    </div>
</template>

<script>
export default {
    name:'iconlist',
    data() {
        return {
            iconlist: [
                {icon:'icon-yudu',name:'每日推荐',id:1},
                {icon:'icon-gouwu',name:'私人FM',id:2},
                {icon:'icon-huati',name:'歌单',id:3,path:'/square'},
                {icon:'icon-yudu',name:'排行榜',id:4},
                {icon:'icon-huati',name:'直播',id:5},
                {icon:'icon-yudu',name:'排行榜',id:6},
                {icon:'icon-huati',name:'直播',id:7},
            ]
        };
    },
    methods:{
        goto(path){
            this.$router.push(path)
        }
       
    }
};
</script>

<style scoped lang="scss">
.iconlist::-webkit-scrollbar {
    display: none;
}
.iconlist{
    display: flex;
    padding: 0rem .1rem .15rem ;
    font-size: .14rem;
    overflow: hidden;
    overflow-x: scroll;
    border-bottom: 1px solid #E6E6E6;
    .itemicon{
        margin-right: .2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        .iconbox{
            padding: .1rem;
            background-color: #FFF1F1;
            border-radius: 50%;
        }
        .tit{
            margin-top: .1rem;
            white-space: nowrap;
        }
    }
}
</style>
